var images = {}; 
// Add in prepareCanvas Function 
loadImage("leftArm"); 
loadImage("legs"); 
loadImage("torso"); 
loadImage("rightArm"); 
loadImage("head"); 
loadImage("hair"); 
loadImage("leftArm-jump");
loadImage("legs-jump");
loadImage("rightArm-jump");


var totalResources = 9; 
var numResourcesLoaded = 0; 
var fps = 30; 

var charX = 245; 
var charY = 185; 

var breathInc = 0.1; 
var breathDir = 1; 
var breathAmt = 0; 
var breathMax = 2; 
var breathInterval = setInterval(updateBreath, 1000 / fps);

var maxEyeHeight = 14; 
var curEyeHeight = maxEyeHeight; 
var eyeOpenTime = 0; 
var timeBtwBlinks = 4000; 
var blinkUpdateTime = 200; 
var blinkTimer = setInterval(updateBlink, blinkUpdateTime);

var jumping = false;



function prepareCanvas(canvasDiv, canvasWidth, canvasHeight) {
// Create the canvas (Neccessary for IE because it doesn't know what a canvas element is)
	canvas = document.createElement('canvas');
	canvas.setAttribute('width', canvasWidth);
	canvas.setAttribute('height', canvasHeight);
	canvas.setAttribute('id', 'canvas');
	canvasDiv.appendChild(canvas);
	if(typeof G_vmlCanvasManager != 'undefined') {
		canvas = G_vmlCanvasManager.initElement(canvas);
	}
	context = document.getElementById('canvas').getContext("2d");
	//loadImage here
}


function loadImage(name) 
{ 
	images[name] = new Image(); 
	images[name].onload = function() { 
		resourceLoaded(); 
	} ;
	images[name].src = "images/" + name + ".png"; 
}


function resourceLoaded() 
{ 
	numResourcesLoaded += 1; 
	if(numResourcesLoaded === totalResources) { 				setInterval(redraw, 1000 / fps); 
	} 
}



function redraw() {
	var x = charX;
	var y = charY;
	var jumpHeight = 45;

	canvas.width = canvas.width;
	// clears the canvas
	// Draw shadow
	if (jumping) {
		drawEllipse(x + 40, y + 29, 100 - breathAmt, 4);
	} else {
		drawEllipse(x + 40, y + 29, 160 - breathAmt, 6);
	}
	if (jumping) {
		y -= jumpHeight;
	}
	if (jumping) {
		context.drawImage(images["leftArm-jump"], x + 40, y - 42 - breathAmt);
	} else {
		context.drawImage(images["leftArm"], x + 40, y - 42 - breathAmt);
	}
	//leg
	if (jumping) {
		context.drawImage(images["legs-jump"], x, y - 6);
	} else {
		context.drawImage(images["legs"], x, y);
	}

	context.drawImage(images["torso"], x, y - 50);
	context.drawImage(images["head"], x - 10, y - 125 - breathAmt);
	context.drawImage(images["hair"], x - 37, y - 138 - breathAmt);
	//right arm
	if (jumping) {
		context.drawImage(images["rightArm-jump"], x - 35, y - 42 - breathAmt);
	} else {
		context.drawImage(images["rightArm"], x - 15, y - 42 - breathAmt);
	}

	drawEllipse(x + 47, y - 68 - breathAmt, 8, curEyeHeight);
	drawEllipse(x + 58, y - 68 - breathAmt, 8, curEyeHeight);

}


function drawEllipse(centerX, centerY, width, height) { 
	context.beginPath(); 
	context.moveTo(centerX, centerY - height/2); 
	context.bezierCurveTo( 
		centerX + width/2, centerY - height/2, 
		centerX + width/2, centerY + height/2, 
		centerX, centerY + height/2
	); 
	context.bezierCurveTo( 
		centerX - width/2, 
		centerY + height/2, 
		centerX - width/2, 
		centerY - height/2, centerX, centerY - height/2
	); 
	context.fillStyle = "black"; 
	context.fill(); context.closePath(); 
}


function updateBreath() { 
	if (breathDir === 1) { // breath in 
		breathAmt -= breathInc; 
		if (breathAmt < -breathMax) { 
			breathDir = -1; 
		} 
	} else { // breath out 
		breathAmt += breathInc; 
		if(breathAmt > breathMax) { 
			breathDir = 1; 
		} 
	} 
}


function updateBlink() { 
	eyeOpenTime += blinkUpdateTime; 
	if(eyeOpenTime >= timeBtwBlinks){ 
		blink(); 
	} 
} 
function blink() { 
	curEyeHeight -= 1; 
	if (curEyeHeight <= 0) { 
		eyeOpenTime = 0; curEyeHeight = maxEyeHeight; 
	} else { 
		setTimeout(blink, 10); 
	} 
}

function jump() {
  if (!jumping) {
	jumping = true;
	setTimeout(land, 500);
  }
}

function land() {
  jumping = false;
}



